<template>
  <div class="home-product">
    <div class="home-panel" v-for="(item, index) in arr4" :key="index">
      <div class="container">
        <div class="head">
          <h3>
            <small>{{ item.name }}</small>
          </h3>
          <div class="sub" v-for="(item, index) in item.children" :key="index">
            <a href="#/category/sub/1005009" class="">{{ item.name }}</a>
          </div>
          <a href="#/category/1005000" class="xtx-more"
            ><span>查看全部</span><i class="iconfont icon-angle-right"></i
          ></a>
        </div>
        <div class="box">
          <a href="#/category/1005000" class="cover"
            ><img alt="" :src="item.picture" /><strong class="label"
              ><span>{{ item.name }}馆</span
              ><span>{{ item.saleInfo }}</span></strong
            ></a
          >
          <ul class="goods-list">
            <li v-for="(item, index) in item.goods" :key="index">
              <div class="goods-item">
                <a href="#/product/4000031" class="image"
                  ><img alt="" :src="item.picture"
                /></a>
                <p class="name ellipsis-2">
                  {{ item.name }}
                </p>
                <p class="desc ellipsis">
                  {{ item.desc }}
                </p>
                <p class="price">¥169.00</p>
                <div class="extra">
                  <a
                    aria-current="page"
                    href="#/"
                    class="router-link-active router-link-exact-active"
                    ><span>找相似</span><span>发现现多宝贝 &gt;</span></a
                  >
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
  import axios from 'axios';
export default {
    
  data() {
    return {
      arr4: [],
    };
  },
  mounted() {
    var _this = this;
    axios({
      url: "http://pcapi-xiaotuxian-front-devtest.itheima.net/home/goods",
      mounted: "get",
    }).then(function (res) {
      if (res.data.msg == "操作成功") {
        _this.arr4 = res.data.result;
        console.log(_this.arr4);
      }
    });
  },
};
</script>
  
  <style scoped>
  small{
    font-size: 16px  !important;
    color: #999  !important;
    margin-left: 20px;
  }
.home-product .sub {
  margin-bottom: 2px;
}
.home-product .sub a {
  padding: 2px 12px;
  font-size: 16px;
  border-radius: 4px;
}
.home-product .sub a:hover {
  background: #27ba9b;
  color: #fff;
}
.home-product .sub a:last-child {
  margin-right: 80px;
}
.home-product .box .cover .label {
    width: 188px;
    height: 66px;
    display: flex;
    font-size: 18px;
    color: #fff;
    line-height: 66px;
    font-weight: 400;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate3d(0, -50%, 0);
  }
  .home-product .box .cover .label span {
    text-align: center;
  }
  .home-product .box .cover .label span:first-child {
    width: 76px;
    background: rgba(0, 0, 0, 0.9);
  }
  .home-product .box .cover .label span:last-child {
    flex: 1;
    background: rgba(0, 0, 0, 0.7);
  }
  .goods-item .extra {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 86px;
    width: 100%;
    background: #27ba9b;
    text-align: center;
    transform: translate3d(0, 100%, 0);
    transition: all 0.5s;
  }
  .goods-item .extra span {
    display: block;
    color: #fff;
    width: 120px;
    margin: 0 auto;
    line-height: 30px;
  }
  .goods-item .extra span:first-child {
    font-size: 18px;
    border-bottom: 1px solid #fff;
    line-height: 40px;
    margin-top: 5px;
  }
  .goods-item:hover {
    border-color: #27ba9b;
  }
  .goods-item:hover .extra {
    transform: none;
  }
  .home-product .box .goods-list{
    width: 990px;
    display: flex;
    flex-wrap: wrap;
  }
  .home-product .box .goods-list li{
    width: 240px;
    height: 300px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .home-product .box .goods-list li:nth-last-child(-n + 4) {
    margin-bottom: 0;
  }
  .home-product .box .goods-list li:nth-child(4n) {
    margin-right: 0;
  }
  .goods-item .extra {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 86px;
    width: 100%;
    background: #27ba9b;
    text-align: center;
    transform: translate3d(0, 100%, 0);
    transition: all 0.5s;
  }
  .goods-item .extra span {
    display: block;
    color: #fff;
    width: 120px;
    margin: 0 auto;
    line-height: 30px;
  }
  .goods-item .extra span:first-child {
    font-size: 18px;
    border-bottom: 1px solid #fff;
    line-height: 40px;
    margin-top: 5px;
  }
  .goods-item:hover {
    border-color: #27ba9b;
  }
  .goods-item:hover .extra {
    transform: none;
  }
  .home-product .box {
    display: flex;
    height: 610px  !important;
  }
  .home-product .box .cover {
    width: 240px;
    height: 610px;
    margin-right: 10px;
    position: relative;
  }
  .home-product .box .cover img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .home-product .box .cover .label {
    width: 188px;
    height: 66px;
    display: flex;
    font-size: 18px;
    color: #fff;
    line-height: 66px;
    font-weight: 400;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate3d(0, -50%, 0);
  }
  .home-product .box .cover .label span {
    text-align: center;
  }
  .home-product .box .cover .label span:first-child {
    width: 76px;
    background: rgba(0, 0, 0, 0.9);
  }
  .home-product .box .cover .label span:last-child {
    flex: 1;
    background: rgba(0, 0, 0, 0.7);
  }
  .home-product .box .goods-list {
    width: 990px;
    display: flex;
    flex-wrap: wrap;
  }
  .home-product .box .goods-list li {
    width: 240px;
    height: 300px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .home-product .box .goods-list li:nth-last-child(-n + 4) {
    margin-bottom: 0;
  }
  .home-product .box .goods-list li:nth-child(4n) {
    margin-right: 0;
  }
  .goods-item {
    width: 240px;
    height: 300px;
    padding: 10px 30px;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    transition: all 0.5s;
  }
  .goods-item .image {
    display: block;
    width: 160px;
    height: 160px;
    margin: 0 auto;
  }
  .goods-item .image img {
    width: 100%;
    height: 100%;
  }
  .goods-item p {
    margin-top: 6px;
    font-size: 16px;
  }
  .goods-item p.name {
    height: 44px;
  }
  .goods-item p.desc {
    color: #666;
    height: 22px;
  }
  .goods-item p.price {
    margin-top: 10px;
    font-size: 20px;
    color: #cf4444;
  }
  .goods-item .extra {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 86px;
    width: 100%;
    background: #27ba9b;
    text-align: center;
    transform: translate3d(0, 100%, 0);
    transition: all 0.5s;
  }
  .goods-item .extra span {
    display: block;
    color: #fff;
    width: 120px;
    margin: 0 auto;
    line-height: 30px;
  }
  .goods-item .extra span:first-child {
    font-size: 18px;
    border-bottom: 1px solid #fff;
    line-height: 40px;
    margin-top: 5px;
  }
  .goods-item:hover {
    border-color: #27ba9b;
  }
  .goods-item:hover .extra {
    transform: none;
  }
  .home-panel{
    background-color: #fff;
  }
</style>